import { useState } from 'react';
import { X, Eye, Edit3, Settings } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Switch } from '@/components/ui/switch';

interface NodeData {
  id: string;
  type: string;
  label: string;
  subtitle: string;
  icon: string;
  category: 'content' | 'interactive';
}

interface PropertiesPanelProps {
  selectedNode: NodeData | null;
  onClose: () => void;
  onUpdate: (nodeId: string, data: Partial<NodeData>) => void;
}

export function PropertiesPanel({ selectedNode, onClose, onUpdate }: PropertiesPanelProps) {
  const [formData, setFormData] = useState({
    label: selectedNode?.label || '',
    subtitle: selectedNode?.subtitle || '',
    description: '',
    content: '',
    settings: {
      autoplay: false,
      showTitle: true,
      allowSkip: true,
    }
  });

  if (!selectedNode) return null;

  const handleSave = () => {
    onUpdate(selectedNode.id, {
      label: formData.label,
      subtitle: formData.subtitle,
    });
  };

  const getCategoryColor = () => {
    return selectedNode.category === 'content' 
      ? 'hsl(var(--workflow-content))' 
      : 'hsl(var(--workflow-interactive))';
  };

  return (
    <div className="w-96 bg-gradient-to-b from-card to-card/80 border-l backdrop-blur-sm h-full flex flex-col">
      {/* Header */}
      <div className="p-6 border-b bg-gradient-to-r from-background to-muted/20">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div 
              className="p-2 rounded-lg"
              style={{ 
                backgroundColor: `${getCategoryColor()} / 0.1`,
                color: getCategoryColor()
              }}
            >
              <Settings className="w-5 h-5" />
            </div>
            <div>
              <h3 className="font-bold text-lg">Properties</h3>
              <p className="text-sm text-muted-foreground">
                Configure {selectedNode.label}
              </p>
            </div>
          </div>
          <Button variant="ghost" size="sm" onClick={onClose}>
            <X className="w-4 h-4" />
          </Button>
        </div>
      </div>

      <ScrollArea className="flex-1 p-6">
        <div className="space-y-6">
          {/* Basic Info */}
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <Edit3 className="w-4 h-4" />
                Basic Information
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="label">Label</Label>
                <Input
                  id="label"
                  value={formData.label}
                  onChange={(e) => setFormData(prev => ({ ...prev, label: e.target.value }))}
                  placeholder="Enter label"
                />
              </div>
              
              <div className="space-y-2">
                <Label htmlFor="subtitle">Subtitle</Label>
                <Input
                  id="subtitle"
                  value={formData.subtitle}
                  onChange={(e) => setFormData(prev => ({ ...prev, subtitle: e.target.value }))}
                  placeholder="Enter subtitle"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
                  placeholder="Enter description"
                  rows={3}
                />
              </div>
            </CardContent>
          </Card>

          {/* Content Configuration */}
          {selectedNode.category === 'content' && (
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Edit3 className="w-4 h-4" />
                  Content Configuration
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="content">Content</Label>
                  <Textarea
                    id="content"
                    value={formData.content}
                    onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
                    placeholder={`Enter ${selectedNode.type} content...`}
                    rows={4}
                  />
                </div>
              </CardContent>
            </Card>
          )}

          {/* Settings */}
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <Settings className="w-4 h-4" />
                Settings
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <Label htmlFor="autoplay">Auto-play</Label>
                <Switch
                  id="autoplay"
                  checked={formData.settings.autoplay}
                  onCheckedChange={(checked) => 
                    setFormData(prev => ({ 
                      ...prev, 
                      settings: { ...prev.settings, autoplay: checked }
                    }))
                  }
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="showTitle">Show Title</Label>
                <Switch
                  id="showTitle"
                  checked={formData.settings.showTitle}
                  onCheckedChange={(checked) => 
                    setFormData(prev => ({ 
                      ...prev, 
                      settings: { ...prev.settings, showTitle: checked }
                    }))
                  }
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="allowSkip">Allow Skip</Label>
                <Switch
                  id="allowSkip"
                  checked={formData.settings.allowSkip}
                  onCheckedChange={(checked) => 
                    setFormData(prev => ({ 
                      ...prev, 
                      settings: { ...prev.settings, allowSkip: checked }
                    }))
                  }
                />
              </div>
            </CardContent>
          </Card>

          {/* Live Preview */}
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <Eye className="w-4 h-4" />
                Live Preview
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div 
                className="p-4 rounded-lg border-2 text-center"
                style={{ borderColor: getCategoryColor() }}
              >
                <div className="text-sm font-medium">{formData.label || selectedNode.label}</div>
                <div className="text-xs text-muted-foreground mt-1">
                  {formData.subtitle || selectedNode.subtitle}
                </div>
                {formData.description && (
                  <div className="text-xs text-muted-foreground mt-2">
                    {formData.description}
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </ScrollArea>

      {/* Footer */}
      <div className="p-6 border-t bg-gradient-to-r from-muted/20 to-muted/40 backdrop-blur-sm">
        <div className="flex gap-2">
          <Button onClick={handleSave} className="flex-1">
            Save Changes
          </Button>
          <Button variant="outline" onClick={onClose}>
            Cancel
          </Button>
        </div>
      </div>
    </div>
  );
}